<template>
  <div class="topColumn">
    <div ref="dragSelect" class="box-container">
      <el-tag
        v-for="(tag, index) in zoneTagList"
        :key="tag.id"
        :closable="authorityHandle(234)"
        :class="{ activity: activityindex == index }"
        :disable-transitions="false"
        @click="tagclick(tag, index)"
        @dblclick.native="tagDoublelclick(tag)"
        @close="handleZoneTagDelete(tag)"
      >
        {{ tag.customsPassName }}
      </el-tag>
      <el-input
        v-if="inputVisible && authorityHandle(234)"
        ref="saveTagInput"
        v-model="inputValue"
        class="input-new-tag"
        size="small"
        @blur="handleInputBlur"
        @keyup.enter.native="handleInputConfirm"
      />
      <el-button v-if="!inputVisible && authorityHandle(234)" class="button-new-tag" size="small" @click="addNewZone">+ 添加关卡</el-button>
    </div>

    <!-- 关卡名称修改 弹窗 -->
    <k-dialog
      :show-hide.sync="itemShowHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      class="addZone-dialog"
      title="修改关卡"
      :show-foot="false"
      :two-btn="authorityHandle(234)"
      @click="saveLeveData"
    >
      <el-form :model="levelInfo" label-width="auto" class="form-modify">
        <el-form-item label="关卡名称：" prop="name"><el-input v-model="levelInfo.customsPassName" placeholder="请输入关卡名称" /></el-form-item>
      </el-form>
    </k-dialog>
  </div>
</template>

<script>
import { levelList, saveCustom, deleteCustom, updateCustom } from '@/api/levelActivity/index.js'
let clickTimer = null
export default {
  data() {
    return {
      // 关卡相关
      zoneTagList: [],
      activityindex: 0,
      inputVisible: false,
      inputValue: '',
      currentZoneId: undefined,

      levelInfo: {
        id: undefined,
        customsPassName: undefined
      },
      itemShowHide: false
    }
  },
  created() {
    this.getData(1)
  },

  methods: {
    getData(v = 0) {
      levelList({ activityCustomsId: this.$route.query.id }).then(res => {
        this.zoneTagList = res.data.data
        if (this.zoneTagList.length > 0) {
          if (v || this.zoneTagList.length == 1) {
            this.$emit('toItem', { id: this.zoneTagList[0].id, switch: this.zoneTagList[0].customsPassSwitch })
          }
        }
      })
    },

    // 添加新的专区
    addNewZone() {
      if (this.zoneTagList.length >= 20) {
        this.$message.warning('最多添加 20 个专区')
        return
      }
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputBlur() {
      this.inputVisible = false
      this.inputValue = ''
    },

    // 删除专区
    handleZoneTagDelete(tag) {
      this.$log(tag.id)
      if (!tag.id) {
        this.$message.success('删除失败')
        return
      }
      deleteCustom({ id: tag.id }).then(res => {
        if (res.data.success) {
          this.zoneTagList.splice(this.zoneTagList.indexOf(tag), 1)
          this.$message.success('删除成功')
          if (this.zoneTagList.length == 0 || this.activityindex >= this.zoneTagList.length) {
            this.$emit('toItem', {})
          }
        } else {
          this.$message.warning(res.data.msg)
        }
      })
    },

    //  确定添加新的专区保存专区
    handleInputConfirm() {
      const inputValue = this.inputValue
      this.inputVisible = false
      this.inputValue = ''
      if (!inputValue) return
      saveCustom({ customsPassName: inputValue, activityCustomsId: this.$route.query.id }).then(res => {
        if (res.data.success) {
          this.getData()
        } else {
          this.$message.warning(res.data.msg)
        }
      })
    },

    // 开关
    setSwitch(id, event) {
      updateCustom({ id, customsPassSwitch: event }).then(res => {
        if (res.data.success) {
          this.getData()
          this.$message.success('操作成功')
        } else {
          this.$message.warning(res.data.msg)
        }
      })
    },

    // 单击
    tagclick(tag, index) {
      clearTimeout(clickTimer)
      clickTimer = setTimeout(() => {
        this.currentZoneId = tag.id
        this.$emit('toItem', { id: tag.id, switch: tag.customsPassSwitch })
        this.activityindex = index
      }, 300)
    },

    // 双击
    tagDoublelclick(tag) {
      clearTimeout(clickTimer)
      this.levelInfo.id = tag.id
      this.levelInfo.customsPassName = tag.customsPassName
      this.itemShowHide = true
    },

    // 修改关卡名称
    saveLeveData() {
      if (!this.levelInfo.customsPassName) {
        this.$message.error('名称必填')
        return
      }
      updateCustom(this.levelInfo).then(res => {
        if (res.data.success) {
          this.$message.success('操作成功')
          this.itemShowHide = false
          this.getData()
        } else {
          this.$message.error(res.data.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$menuText: #14162e; // 侧边栏字体颜色
$hoverColor: #1D143C; // 鼠标停留主色调浅色
$mainColor: #3b425d; // 主色调

.box-container {
	position: relative;
	box-sizing: border-box;
	background-color: #fdfdfd;
	margin-right: 20px;
	border-radius: 10px;
	margin-bottom: 40px;
	.el-tag + .el-tag {
		margin-left: 10px;
	}
	.el-tag {
		color: $mainColor;
		background-color: #ffffff;
		border-color: $mainColor;
		::v-deep .el-tag__close {
			color: $mainColor;
		}
		::v-deep .el-icon-close:hover {
			color: #ffffff;
			background: $mainColor;
		}
	}
	.button-new-tag {
		margin-left: 10px;
		height: 32px;
		line-height: 30px;
		padding-top: 0;
		padding-bottom: 0;
		&:hover {
			color: #ffffff;
			background: $mainColor;
		}
	}
	.input-new-tag {
		width: 90px;
		margin-left: 10px;
		vertical-align: bottom;
	}
	::v-deep .el-input__inner:focus {
		border-color: $mainColor;
	}
	.activity {
		background-color: $mainColor;
		color: #ffffff;
		::v-deep .el-tag__close {
			color: #ffffff;
		}
		::v-deep .el-icon-close:hover {
			color: $mainColor;
			background: #ffffff;
		}
	}
}
.filter-container {
	width: 100%;
	height: 48px;
	line-height: 48px;

	.filter-item {
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 10px;
	}

	.kInput {
		position: absolute;
		right: 20px;
	}

	.filter-title {
		height: 48px;
		line-height: 48px;
		font-size: 16px;
		font-weight: 500;
		margin-right: 22px;
		color: #14162e;
	}

	.user-item {
		margin-left: 10px;
		margin-right: 20px;
	}

	.room-type,
	.user-status,
	.account-status {
		margin-right: 20px;
	}
}
</style>
